<style lang='scss' scoped>
  .regist{
    position: relative;
    margin: 58px auto 30px auto;
    width:800px;
    height:70px;
    font-size:50px;
    color:rgba(0,0,0,0.87);
    line-height:70px;
    text-align: center;
  }

  .s-login-where{
    width:500px;
    height:28px;
    margin: 0 auto;
    font-size:20px;
    color:rgba(155,155,155,1);
    line-height:28px;
    text-align: center;
  }

  .s-search-box{
    display: flex;
    position: relative;
    width: 310px; height: 40px;
    margin: 55px auto 128px auto;
    border:1px solid rgba(200,200,200,1);
    border-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    &>input{
      display: block;
      flex: 1;
      border: none;
      padding: 0 20px;
      box-sizing: border-box;
    }
    &>div{
      width: 40px;
      cursor: pointer;
    }
  }

  .search-icon{
    position: absolute;
    display: block;
    font-size: 16px!important;
    width: 18px; height: 18px;
    top: 50%; transform: translateY(-50%);
    right: 10px;
  }

  .text{
    clear: both;
    margin-bottom: 104px;
  }

  .s-box{
    width: 1125px;
    margin: 0 auto;
    transform: translateX(10px);
    margin-bottom: 80px;
  }

  .s-item{
    position: relative;
    float: left;
    width: 355px; height: 250px;
    background: #fff;
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.04);
    border-radius:4px;
    border:1px solid rgba(206,206,206,1);
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .s-head{
    width: 40px; height: 40px;
    border-radius: 500%;
    display: block;
    margin: 25px auto;
    margin-bottom: 17px;
  }

  .s-name{
    box-sizing: border-box;
    padding: 0 10px;
    height: 72px;
    line-height: 36px;
    font-size:25px;
    color: #111111;
    text-align: center;
  }

  .s-tip{
    height:13px;
    font-size:13px;
    color:rgba(85,85,85,1);
    line-height:13px;
    text-align: center;
  }

  .s-btn{
    position: absolute;
    width: 100%; bottom: 0;
    height: 55px;
    border-top: 1px solid #CFCFCF;
    line-height: 55px;
    text-align: center;
    font-size:13px;
    color:rgba(136,136,136,1);
  }

  .s-arrow{
    position: absolute;
    width: 20px; height: 13px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    line-height: 13px;
  }
</style>
<template>
  <section class='m-page'>
    <x-head />

    <div class="regist">平台管理员登录商户后台</div>
    <div class="s-login-where">请选择进入哪个商户</div>
    <div class="s-search-box">
      <input v-model="searchText" type="text" placeholder="搜索 名称/ID" @keydown.enter="searchItem" ref="input" @focus="focus" @blur="blur">
      <div><yd-icon name="search" class="search-icon"></yd-icon></div>
    </div>

    <div class="s-box">
      <div class="s-item" v-for="(item,i) in resultList" :key="i" :item="item" @click="loginAction(item)">
        <img :src="item.usericon" class="s-head">
        <div class="s-name">{{item.username}}</div>
        <div class="s-tip">您是{{item.subtype == 'shopowner' ? '超级管理员' : item.subtype == 'subagent' ? '微代理' : '子管理员'}}</div>
        <div class="s-btn">{{item.substate == 'enable' ? '点击进入管理页面' : '审核中...'}}<div class="s-arrow">></div></div>
      </div>
      <div style="clear: both;"></div>
    </div>

    <div class="text">温馨提示：超级管理员/有权限的子管理员，可进入任何一个商户后台，查看管理编辑内容</div>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        resultList :this.$store.state.login.loginList,
        searchText: ''
      }
    },

    components: {},

    computed: {
      ...mapState({
          loginList: state => state.login.loginList
      })
    },

    mounted () {

    },

    methods: {
      ...mapActions([
        'login',
        'getUserInfo'
      ]),
      searchItem(){
          this.resultList = [];
          for(var i = 0; i < this.loginList.length; i++){
              var sub = this.loginList[i];
              if(String(sub.username).indexOf(this.searchText) != -1){
                this.resultList.push(sub)
              }
          }
      },
      loginAction (item) {
        let data = {
          userid: item.userid,
          openid: item.openid,
          deviceid: 'EAADFS36612sD1'
        }
        this.login(data)
          .then(data => {
            localStorage.setItem('token',data.result.token)
            localStorage.setItem('userid',data.result.userid)
            this.$router.push('/manager')
            let params = {action: 'get'}
            this.$store.state.needRefreshInfo += 1
            this.getUserInfo(params)
          })
      },
      focus (e) {
        e.target.setAttribute('placeholder', '')
        e.target.style.textAlign = 'left'
      },
      blur (e) {
        e.target.setAttribute('placeholder', '搜索 名称/ID')
        if (!e.target.value) {
          e.target.style.textAlign = 'center'
        }
      }
    }
  }

</script>

